<template>
  <div>
    <!-- 顶部登录功能 -->
    <div class="top" v-if="UserFalge">
      <img :src="src" alt="" />
      <div class="login">
        <span @click="login">{{ title }}</span>
        <b @click="dle">{{ back }}</b>
      </div>
    </div>
    <router-view></router-view>
    <!-- 登录功能组件 -->
    <Login :show="show" v-if="show" @abc="img" />
    <!-- 菜单选项卡组件 -->
    <Section />
    <van-overlay :show="show" />
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Section from "../components/User/Section.vue";
import Login from "../components/User/Login.vue";
import { Dialog, Toast } from "vant";
export default {
  name: "User",
  data() {
    return {
      src2: `
        Rw0KGgoAAAANSUhEUgAAAH4AAAB+BAMAA
        AAQDbi7AAAABGdBTUEAALGPC/xhBQAAAAF
        zUkdCAK7OHOkAAAASUExURfjz8NTIvOPa0d
        rQxe3l3/Pt6dJ8uJYAAAGKSURBVFjD7ZjNbo
        MwEIT5vccxuZPS3qHJA4SouQPp+z9LkSJVBdu
        w42mEqnrun9de744XoigoKCgoKCjoN5V/VI1Sp
        5eLH34d4YdePejPb3rUGQ+uJkIXiNVMJcanc35P
        8uAGEsVtwOQVVAWZyddkfOgAR5NXHZN+7AZs4YE
        E5DZcHZjsjyq44wMXYOe1f/c9FPg/wqdP4TXjHlD
        9sjzbfxnZ/3b/2Mn9q+H8y+5/cv8crPyppI4vv8D
        EwWuu/MV8vHH89En5K6jyBxrAwddU+QIF3Nv5jvMf
        Tfa/3D+ilpx/soac3zJy/oyI7NkdsMD4lhp/LR4Afo
        Ql3PeHkYAa5Xsm+0YNlzAf3ZnTz0poF/j/xl9/NoB+v
        2H0YPgHskJWWZ/fm8/WJ3uQvEB5pZzSb17WD/yIGdSK9
        h2FLy8gwJcWEOFuN0qUUGefzK/a6VGMK90t++2qCvHQ59
        BFNLK4deDCGxnoQX5+BQ3KF9T25y9yDPPTabbF+dKz9qw
        TSUPyOD59U7bmm634LwhiuCxbAoGfAAAAAElFTkSuQmCC`,
      src: `
        Rw0KGgoAAAANSUhEUgAAAH4AAAB+BAMAA
        AAQDbi7AAAABGdBTUEAALGPC/xhBQAAAAF
        zUkdCAK7OHOkAAAASUExURfjz8NTIvOPa0d
        rQxe3l3/Pt6dJ8uJYAAAGKSURBVFjD7ZjNbo
        MwEIT5vccxuZPS3qHJA4SouQPp+z9LkSJVBdu
        w42mEqnrun9de744XoigoKCgoKCjoN5V/VI1Sp
        5eLH34d4YdePejPb3rUGQ+uJkIXiNVMJcanc35P
        8uAGEsVtwOQVVAWZyddkfOgAR5NXHZN+7AZs4YE
        E5DZcHZjsjyq44wMXYOe1f/c9FPg/wqdP4TXjHlD
        9sjzbfxnZ/3b/2Mn9q+H8y+5/cv8crPyppI4vv8D
        EwWuu/MV8vHH89En5K6jyBxrAwddU+QIF3Nv5jvMf
        Tfa/3D+ilpx/soac3zJy/oyI7NkdsMD4lhp/LR4Afo
        Ql3PeHkYAa5Xsm+0YNlzAf3ZnTz0poF/j/xl9/NoB+v
        2H0YPgHskJWWZ/fm8/WJ3uQvEB5pZzSb17WD/yIGdSK9
        h2FLy8gwJcWEOFuN0qUUGefzK/a6VGMK90t++2qCvHQ59
        BFNLK4deDCGxnoQX5+BQ3KF9T25y9yDPPTabbF+dKz9qw
        TSUPyOD59U7bmm634LwhiuCxbAoGfAAAAAElFTkSuQmCC`,
    };
  },
  components: {
    Section,
    Login,
  },
  methods: {
    img(m) {
      localStorage.setItem("str", m);
      this.src = m;
    },
    login() {
      if (localStorage.getItem("token")) {
        return;
      }
      this.chanGe2();
    },
    dle() {
      console.log(this);
      if (!localStorage.getItem("token")) {
        return;
      }
      Dialog.confirm({
        message: "是否确定退出登录",
      })
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("username");
          localStorage.removeItem("str");
          this.Cback();
          this.username();
          this.src = this.src2;
          setTimeout(() => {
            Toast.success("注销登陆成功");
          }, 500);
        })
        .catch(() => {
          console.log("取消了注销");
        });

      // alert("注销登录成功");
    },
    ...mapMutations(["chanGe2", "username", "Cback"]),
  },
  computed: {
    ...mapState(["show", "title", "back", "UserFalge"]),
  },
  created() {
    if (localStorage.getItem("str")) {
      this.src = localStorage.getItem("str");
    }
    this.username();
  },
};
</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 110px;
  background: #333;
  position: relative;
  img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    left: 15px;
  }
  .login {
    color: white;
    width: 280px;
    height: 20px;
    // background: yellowgreen;
    position: absolute;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    b {
      margin-right: 13px;
      font-weight: 600;
      font-size: 20px;
    }
  }
}
</style>